<template>
  <!--单选题-->
  <div  class="choice_container">
    <div v-for="(item,index) in answerList" >
      <div v-if="!item.isRight">
        <el-text style="font-weight: bold">{{ question.type != 2?Alphabet[index]:"" }}</el-text>
        <el-text style="margin-left: 0.5em">{{item.answer}}</el-text>
      </div>
      <div v-else>
        <el-text type="success" style="font-weight: bold">{{ question.type != 2?Alphabet[index]:"" }}</el-text>
        <el-text type="success" style="margin-left: 0.5em">{{item.answer}}</el-text>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Alphabet, Exam, Question, QuestionAnswer, User, UserAnswer} from "../../types/mytypes";
import {QuestionRequest} from "../../request/MyRequset";
const props = defineProps<{
  question:Question,
  userAnswer?:{
    list:UserAnswer[]
    miss:boolean
  }
}>()


let answerList = ref<QuestionAnswer[]>([])
let miss = ref(false)

const emit = defineEmits(['miss'])

onMounted(async () => {
  await initData()
  if(props.userAnswer != undefined){
    let {list,miss} = props.userAnswer
  }
})
const initData = async ()=>{
  let getAnswerRes = await QuestionRequest.getAllAnswer(props.question.id as number)
  if(getAnswerRes.suc){
    answerList.value = getAnswerRes.data
  }
}
</script>

<style scoped lang="scss">
.choice_container {
  display: flex;
  flex-direction: column;
  align-items: start;

  .choice_item {
    padding: 0;
    margin: 0.5em;
  }
}
</style>